/* eslint-disable implicit-arrow-linebreak */
import themeConfig from '@configs/themeConfig'
import { Button, Card, Input, Label } from 'reactstrap'
import email from '../../assets/images/contact/email.png'
import location from '../../assets/images/contact/map-1.png'
import location2 from '../../assets/images/contact/map-2.png'
import object from '../../assets/images/contact/object-header.png'
import phone from '../../assets/images/contact/phone.png'

import { Icon } from '@iconify/react'

const Contact = () => {
  const handleOpenWindows = (link) => {
    window.open(link, '_blank')
  }
  return (
    <Card
      className="main-contact-container"
      style={{ padding: 0, marginBottom: 0 }}
    >
      <div className="p-2 d-flex align-items-center bg-yellow  ">
        <img
          src={themeConfig.app.appLogoImage}
          alt="logo-dark"
          height={60}
          width={60}
        />
        <h2 className=" mb-0">ethera</h2>
      </div>
      <section className="thank-you-section">
        <div className="contact-us-style">
          <h1>Contact Us</h1>
        </div>
        <div className="text-center contact-container">
          <img src={object} alt="Ethera" className="jelly" />
          <div className="content-container">
            <h1>Thank you for your interest in the Ethera community!</h1>
            <p>
              We are building a collaborative community of passionate providers
              that will be empowered with flexible access to a warm, comfortable
              and modern space, specially designed to nurture the
              therapist‐client relationship.
            </p>
            <h6>
              *Offices located in Orange County (central to Irvine, Newport
              Beach, Costa Mesa, Santa Ana)
            </h6>
          </div>
        </div>
      </section>

      <section className="address-section">
        <div className="address-container">
          <div className="address-box">
            <img src={email} alt="email" />
            <a href="mailto:hello@myethera.com">hello@myethera.com</a>
          </div>
          <div className="address-box">
            <img src={location} alt="email" />
            <a>
              19712 MacArthur Blvd.,
              <br /> Suite 110
              <br /> Irvine, CA 92612
            </a>
          </div>{' '}
          <div className="address-box">
            <img src={phone} alt="email" />
            <a href="tel:7147259897">714-725-9897</a>
          </div>{' '}
          <div className="address-box">
            <img src={location2} alt="email" />
            <div>
              <a href="mailto:hello@myethera.com">Los Angeles, CA</a>
              <p>Coming Soon</p>
            </div>
          </div>
        </div>
      </section>

      <section className="contact-form">
        <div className="contact-container">
          <h1>We’re here for you.</h1>
          <p>
            We’d love to hear from you. Please contact us with any questions and
            we’ll get back to you within
            <span>1-2 business days.</span>
          </p>
          <form>
            <div className="minHeightLoginInputs">
              <Label className="form-label px-1" for="email">
                First name
              </Label>
              <Input
                required
                type="email"
                id="email"
                name="email"
                placeholder="Enter First Name"
                className="radius-25 skin-change"
                // {...formik.getFieldProps('email')}
                // className={classNames({
                //   'radius-25 skin-change': true,
                //   'is-invalid': formik.touched.email && formik.errors.email
                // })}
              />
              {/* {formik.touched.email && formik.errors.email && (
                <FormFeedback className="px-1">
                  {formik.errors.email}
                </FormFeedback>
              )} */}
            </div>
            <div className="minHeightLoginInputs">
              <Label className="form-label px-1" for="email">
                Last name
              </Label>
              <Input
                type="email"
                id="email"
                name="email"
                placeholder="Enter Last Name"
                className="radius-25 skin-change"
                // {...formik.getFieldProps('email')}
                // className={classNames({
                //   'radius-25 skin-change': true,
                //   'is-invalid': formik.touched.email && formik.errors.email
                // })}
              />
              {/* {formik.touched.email && formik.errors.email && (
                <FormFeedback className="px-1">
                  {formik.errors.email}
                </FormFeedback>
              )} */}
            </div>
            <div className="minHeightLoginInputs">
              <Label className="form-label px-1" for="email">
                Email
              </Label>
              <Input
                type="email"
                id="email"
                name="email"
                placeholder="Enter Your Email "
                className="radius-25 skin-change"
                // {...formik.getFieldProps('email')}
                // className={classNames({
                //   'radius-25 skin-change': true,
                //   'is-invalid': formik.touched.email && formik.errors.email
                // })}
              />
              {/* {formik.touched.email && formik.errors.email && (
                <FormFeedback className="px-1">
                  {formik.errors.email}
                </FormFeedback>
              )} */}
            </div>
            <div className="minHeightLoginInputs">
              <Label className="form-label px-1" for="email">
                Phone
              </Label>
              <Input
                type="email"
                id="email"
                name="email"
                placeholder="Enter Your Phone "
                className="radius-25 skin-change"
                // {...formik.getFieldProps('email')}
                // className={classNames({
                //   'radius-25 skin-change': true,
                //   'is-invalid': formik.touched.email && formik.errors.email
                // })}
              />
              {/* {formik.touched.email && formik.errors.email && (
                <FormFeedback className="px-1">
                  {formik.errors.email}
                </FormFeedback>
              )} */}
            </div>
            <div className="minHeightLoginInputs full-width">
              <Label className="form-label px-1" for="email">
                How can we help?
              </Label>
              <Input
                type="email"
                id="email"
                name="email"
                placeholder="Enter Your Message "
                className="radius-25 skin-change"
                // {...formik.getFieldProps('email')}
                // className={classNames({
                //   'radius-25 skin-change': true,
                //   'is-invalid': formik.touched.email && formik.errors.email
                // })}
              />
              {/* {formik.touched.email && formik.errors.email && (
                <FormFeedback className="px-1">
                  {formik.errors.email}
                </FormFeedback>
              )} */}
            </div>
            <div className="submit-btn-div">
              <Button
                type="submit"
                color="primary"
                block
                className="button-primary my-2"
              >
                <span className="mx-1">Submit</span>
              </Button>
            </div>
          </form>
        </div>
      </section>

      <section className="join-section">
        <div className="join-container">
          <h1>Join the Private Practice Movement</h1>
          <a href="mailto:hello@myethera.com" className="contact-request-btn">
            Request More Info
          </a>
          <a
            className="apply-btn"
            onClick={() => handleOpenWindows('https://myethera.com/apply-now/')}
          >
            Apply Now
          </a>
        </div>
      </section>

      {/* <hr className="horizantel-row-privacy" /> */}
      <footer>
        <nav className="privacy-policy-footer-nav">
          <div className="privacy-policy-footer">
            <ul className="d-flex " style={{ listStyle: 'none', gap: '1rem' }}>
              <li
                className="facebook-pd pointer"
                onClick={() =>
                  handleOpenWindows('https://www.facebook.com/my.ethera')
                }
              >
                <a>
                  <Icon icon="brandico:facebook" fontSize={20} color="white" />
                </a>
              </li>
              <li
                className="pointer"
                onClick={() =>
                  handleOpenWindows('https://www.instagram.com/my.ethera/')
                }
              >
                <a>
                  <Icon icon="ri:instagram-line" fontSize={20} color="white" />
                </a>
              </li>
              <li
                className="pointer"
                onClick={() =>
                  handleOpenWindows(
                    'https://www.linkedin.com/company/myethera/'
                  )
                }
              >
                <a>
                  <Icon icon="ri:linkedin-fill" fontSize={20} />
                </a>
              </li>
            </ul>
          </div>
          <div>
            <p className='black  line-height-2"'>
              Copyright &#169; 2023 Ethera. All rights reserved.
            </p>
          </div>
        </nav>
      </footer>
    </Card>
  )
}

export default Contact
